<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-07 15:05:57
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-05-25 09:49:01
 * @FilePath: \cxl-h5\src\components\select\List.vue
-->
<template>
    <Transition name="selectFade" mode="out-in" appear>
        <section
            class="select-list"
            :style="{ top: top + 'px', left: left + 'px', width: width + 'px' }"
            v-if="visible"
        >
            <section class="select-list-box">
                <!-- 存在数据 -->
                <section v-if="list.length" class="list-ul">
                    <section
                        :class="['list-li', selectIndex == index && selectIndex !== '' ? 'active' : '']"
                        v-for="(item, index) in list"
                        :key="item"
                        @click="onSelect(index)"
                    >
                        <p>{{ item.name }}</p>
                    </section>
                </section>
                <!-- 没有数据 -->
                <section v-else class="no-data">没有数据</section>
            </section>
        </section>
    </Transition>
</template>

<script setup lang="ts">
import { Ref, ref, reactive, watch, watchEffect } from 'vue'
//接收来自父级的参数
const props = defineProps(['list', 'top', 'left', 'width', 'visible', 'modelValue', 'selectIndex'])
//暴露的回调
const emits = defineEmits(['select'])

//存放数据
const list: any[] = reactive([])
//top
const top: Ref<number | string> = ref(0)
//left
const left: Ref<number | string> = ref(0)
//width
const width: Ref<number | string> = ref(0)
//是否隐藏
const visible = ref(false)
//选择的下标
const selectIndex: Ref<number | string> = ref('')
//监听父级参数变化
watchEffect(() => {
    if (props.list) {
        list.length = 0
        props.list.forEach((element: any) => {
            list.push(element)
        })
    }

    top.value = props.top === undefined ? '0' : parseInt(props.top)
    left.value = props.left === undefined ? '0' : parseInt(props.left)
    width.value = props.width === undefined ? '0' : parseInt(props.width)
})

watch([props.selectIndex, props.visible, props.modelValue], (oldVal, newVal) => {
    selectIndex.value = newVal[0]

    console.log(
        'selectIndex',
        props.selectIndex.value,
        'visible',
        props.visible.value,
        'modelValue',
        props.modelValue.value
    )
    visible.value = props.visible.value

    if (props.visible.value) {
        //显示
        list.forEach((element: any, index: number) => {
            if (props.modelValue.value === element) {
                // selectIndex.value = index
            }
        })
    }
})

const onSelect = (index: number) => {
    emits('select', index)
    visible.value = false
}
</script>

<style scoped lang="scss">
.select-list {
    position: absolute;
    box-sizing: border-box;
    z-index: 12000;
    .select-list-box {
        margin-top: 1rem;
        background-color: #fff;
        border-radius: 0.5rem;
        box-shadow: 0 2px 0.5rem var(--cxl-boxshow-color);
        padding: 0.5rem 0;
        position: relative;
        border: 1px solid var(--cxl-border-color);
        transition: all 0.35s;
        &::after {
            content: '';
            width: 1rem;
            height: 1rem;
            background-color: #fff;
            display: block;
            position: absolute;
            top: -0.5rem;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            border-left: 1px solid var(--cxl-border-color);
            border-top: 1px solid var(--cxl-border-color);
        }
        .no-data {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: var(--cxl-text-color-primary);
            padding: 0.5rem 0;
        }
        .list-ul {
            max-height: 20rem;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            .list-li {
                &.active {
                    p {
                        font-size: var(--cxl-size-12);
                        color: var(--cxl-color-primary);
                    }
                }
            }
            p {
                font-size: 1rem;
                color: var(--cxl-text-color-regular);
                cursor: pointer;
                padding: 0.5rem 1rem;
                &:hover {
                    background-color: aliceblue;
                }
            }
        }
    }
}
</style>
